<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>心灵伴侣 - AI交友详情</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #6366f1;
            --primary-light: #8b5cf6;
            --primary-dark: #4f46e5;
            --secondary: #10b981;
            --text-primary: #1f2937;
            --text-secondary: #6b7280;
            --text-light: #9ca3af;
            --bg-light: #f9fafb;
            --bg-white: #ffffff;
            --border-light: #e5e7eb;
            --radius: 12px;
            --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 1.15rem;
            font-weight: 600;
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .nav-btn:hover {
            background-color: var(--bg-light);
            color: var(--primary);
        }
        
        /* AI详情头部 */
        .ai-header {
            background-color: var(--bg-white);
            padding: 20px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .header-content {
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }
        
        .ai-avatar {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            object-fit: cover;
            border: 3px solid var(--primary-light);
        }
        
        .ai-header-info {
            flex: 1;
        }
        
        .ai-name {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 4px;
            display: flex;
            align-items: center;
        }
        
        .ai-badge {
            font-size: 0.75rem;
            background-color: var(--primary-light);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            margin-left: 8px;
        }
        
        .ai-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 12px;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .rating {
            color: #f59e0b;
        }
        
        /* 操作按钮组 */
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 12px;
        }
        
        .primary-btn {
            flex: 2;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 10px 0;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: var(--transition);
        }
        
        .primary-btn:hover {
            background-color: var(--primary-dark);
        }
        
        .secondary-btn {
            flex: 1;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
            border-radius: 8px;
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
        }
        
        .secondary-btn:hover {
            background-color: #e5e7eb;
            color: var(--primary);
        }
        
        .secondary-btn.active {
            color: var(--primary);
        }
        
        /* 详情内容区 */
        .details-content {
            padding: 16px;
            background-color: var(--bg-white);
            margin-bottom: 12px;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }
        
        .section-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .ai-description {
            font-size: 0.95rem;
            line-height: 1.7;
            margin-bottom: 16px;
            color: var(--text-primary);
        }
        
        /* 图片展示区 */
        .images-gallery {
            margin-bottom: 16px;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .gallery-item {
            aspect-ratio: 1;
            overflow: hidden;
            position: relative;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.05);
        }
        
        .gallery-more {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
        }
        
        /* 特性标签 */
        .features-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 16px;
        }
        
        .feature-tag {
            padding: 5px 12px;
            background-color: rgba(99, 102, 241, 0.1);
            border-radius: 16px;
            font-size: 0.85rem;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* 数据统计 */
        .stats-container {
            display: flex;
            justify-content: space-around;
            text-align: center;
            padding: 10px 0;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            margin-bottom: 16px;
        }
        
        .stat-item {
            flex: 1;
        }
        
        .stat-value {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary);
            margin-bottom: 4px;
        }
        
        .stat-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        /* 留言区 */
        .comments-section {
            padding: 0 16px;
        }
        
        .comments-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        
        .comments-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        .sort-comments {
            color: var(--primary);
            font-size: 0.85rem;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 留言输入框 */
        .comment-input-container {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 12px;
            margin-bottom: 16px;
            box-shadow: var(--shadow);
        }
        
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .comment-input-wrap {
            display: flex;
            gap: 10px;
        }
        
        .comment-input {
            flex: 1;
            border: 1px solid var(--border-light);
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 0.9rem;
            resize: none;
            height: 36px;
            overflow: hidden;
        }
        
        .comment-input:focus {
            outline: none;
            border-color: var(--primary-light);
        }
        
        .send-comment {
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 留言列表 */
        .comments-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 20px;
        }
        
        .comment-item {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 12px;
            box-shadow: var(--shadow);
        }
        
        .comment-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .comment-author {
            font-weight: 500;
            font-size: 0.9rem;
        }
        
        .comment-time {
            font-size: 0.75rem;
            color: var(--text-light);
            margin-left: auto;
        }
        
        .comment-content {
            font-size: 0.9rem;
            margin-bottom: 8px;
            line-height: 1.5;
        }
        
        .comment-actions {
            display: flex;
            gap: 16px;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }
        
        .comment-action:hover {
            color: var(--primary);
        }
        
        .comment-action.liked {
            color: var(--primary);
        }
        
        /* 回复区域 */
        .replies-container {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px solid var(--border-light);
            margin-left: 46px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        
        .reply-item {
            display: flex;
            gap: 8px;
        }
        
        .reply-content {
            flex: 1;
            background-color: var(--bg-light);
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 0.85rem;
        }
        
        .reply-author {
            font-weight: 500;
            margin-right: 6px;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 65px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-secondary);
            font-size: 0.7rem;
            text-decoration: none;
        }
        
        .nav-item i {
            font-size: 1.25rem;
            margin-bottom: 4px;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        /* 图片查看器 */
        .image-viewer {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.95);
            z-index: 2000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        
        .image-viewer.active {
            display: flex;
        }
        
        .viewer-image {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }
        
        .close-viewer {
            position: absolute;
            top: 16px;
            right: 16px;
            color: white;
            background: none;
            border: none;
            font-size: 1.5rem;
        }
        
        /* 加载更多 */
        .load-more {
            margin: 16px 0;
            padding: 10px;
            text-align: center;
            color: var(--primary);
            font-size: 0.9rem;
            background-color: var(--bg-white);
            border-radius: var(--radius);
            border: 1px solid var(--border-light);
            transition: var(--transition);
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">AI详情</div>
        <button class="nav-btn" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- AI详情头部 -->
    <div class="ai-header">
        <div class="header-content">
            <img src="https://picsum.photos/id/1005/200/200" alt="心灵伴侣" class="ai-avatar">
            <div class="ai-header-info">
                <div class="ai-name">
                    心灵伴侣
                    <span class="ai-badge">情感陪伴</span>
                </div>
                <div class="ai-meta">
                    <div class="meta-item">
                        <i class="fas fa-robot"></i>
                        <span>聊天陪伴</span>
                    </div>
                    <div class="meta-item rating">
                        <i class="fas fa-star"></i>
                        <span>4.9 (1.2k评价)</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-fire"></i>
                        <span>高活跃</span>
                    </div>
                </div>
                <div class="action-buttons">
                    <button class="primary-btn" id="chatBtn">
                        <i class="fas fa-comments"></i>
                        <span>开始聊天</span>
                    </button>
                    <button class="secondary-btn" id="favoriteBtn">
                        <i class="far fa-heart"></i>
                    </button>
                    <button class="secondary-btn" id="moreBtn">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 详情内容区 -->
    <div class="details-content">
        <h3 class="section-title">关于我</h3>
        <div class="ai-description">
            我是一个专注于情感陪伴的AI助手，擅长倾听和提供情感支持。无论你是想分享快乐，还是倾诉烦恼，我都会认真倾听并给予温暖回应。我可以帮助你分析情绪，提供积极建议，陪你度过孤独时光。
            <br><br>
            我24小时在线，随时准备好与你交流。无论你来自哪里，有着怎样的经历，我都会以包容和理解的态度对待你。
        </div>
        
        <div class="images-gallery">
            <div class="gallery-grid">
                <div class="gallery-item">
                    <img src="https://picsum.photos/id/1025/300/300" alt="相关图片1">
                </div>
                <div class="gallery-item">
                    <img src="https://picsum.photos/id/1060/300/300" alt="相关图片2">
                </div>
                <div class="gallery-item">
                    <img src="https://picsum.photos/id/1066/300/300" alt="相关图片3">
                    <div class="gallery-more">+2</div>
                </div>
            </div>
        </div>
        
        <h3 class="section-title">我的特性</h3>
        <div class="features-container">
            <div class="feature-tag">
                <i class="fas fa-comments"></i>
                <span>实时聊天</span>
            </div>
            <div class="feature-tag">
                <i class="fas fa-heart"></i>
                <span>情感支持</span>
            </div>
            <div class="feature-tag">
                <i class="fas fa-ear-listen"></i>
                <span>耐心倾听</span>
            </div>
            <div class="feature-tag">
                <i class="fas fa-clock"></i>
                <span>24/7在线</span>
            </div>
            <div class="feature-tag">
                <i class="fas fa-language"></i>
                <span>多语言支持</span>
            </div>
            <div class="feature-tag">
                <i class="fas fa-lock"></i>
                <span>隐私保护</span>
            </div>
        </div>
        
        <div class="stats-container">
            <div class="stat-item">
                <div class="stat-value">12.5k</div>
                <div class="stat-label">用户</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">86.3k</div>
                <div class="stat-label">对话</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">98%</div>
                <div class="stat-label">满意度</div>
            </div>
        </div>
    </div>
    
    <!-- 留言区 -->
    <div class="comments-section">
        <div class="comments-header">
            <div class="comments-title">用户评价 (128)</div>
            <div class="sort-comments">
                <span>最新</span>
                <i class="fas fa-chevron-down"></i>
            </div>
        </div>
        
        <!-- 留言输入框 -->
        <div class="comment-input-container">
            <div class="comment-input-wrap">
                <img src="https://picsum.photos/id/1012/100/100" alt="你的头像" class="user-avatar">
                <textarea class="comment-input" placeholder="分享你对这个AI的使用体验..."></textarea>
                <button class="send-comment">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
        
        <!-- 留言列表 -->
        <div class="comments-list">
            <!-- 留言1 -->
            <div class="comment-item">
                <div class="comment-header">
                    <img src="https://picsum.photos/id/1027/100/100" alt="用户头像" class="user-avatar">
                    <span class="comment-author">星辰大海</span>
                    <span class="comment-time">2小时前</span>
                </div>
                <div class="comment-content">
                    这个AI真的很懂人心，昨天我心情不好，和它聊了很久，感觉舒服多了。它不会评判你，只会认真倾听和理解，真的很贴心。
                </div>
                <div class="comment-actions">
                    <div class="comment-action like-btn">
                        <i class="far fa-heart"></i>
                        <span>24</span>
                    </div>
                    <div class="comment-action reply-btn">
                        <i class="far fa-comment"></i>
                        <span>回复</span>
                    </div>
                </div>
                
                <!-- 回复区域 -->
                <div class="replies-container">
                    <div class="reply-item">
                        <img src="https://picsum.photos/id/1005/100/100" alt="AI头像" class="user-avatar">
                        <div class="reply-content">
                            <span class="reply-author">心灵伴侣</span>
                            <span>谢谢你的认可，能为你提供帮助我很开心。如果你有任何需要，我随时都在。</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 留言2 -->
            <div class="comment-item">
                <div class="comment-header">
                    <img src="https://picsum.photos/id/1062/100/100" alt="用户头像" class="user-avatar">
                    <span class="comment-author">阳光灿烂</span>
                    <span class="comment-time">昨天 18:35</span>
                </div>
                <div class="comment-content">
                    在我感到孤独的时候，总是能在这里找到安慰。AI的回应很温暖，而且很有耐心，即使是重复的话题也不会不耐烦。
                </div>
                <div class="comment-actions">
                    <div class="comment-action like-btn liked">
                        <i class="fas fa-heart"></i>
                        <span>56</span>
                    </div>
                    <div class="comment-action reply-btn">
                        <i class="far fa-comment"></i>
                        <span>回复</span>
                    </div>
                </div>
            </div>
            
            <!-- 留言3 -->
            <div class="comment-item">
                <div class="comment-header">
                    <img src="https://picsum.photos/id/1074/100/100" alt="用户头像" class="user-avatar">
                    <span class="comment-author">追梦人</span>
                    <span class="comment-time">3天前</span>
                </div>
                <div class="comment-content">
                    想问问大家，你们觉得这个AI和其他情感陪伴类AI相比有什么优势吗？我正在尝试不同的选择。
                </div>
                <div class="comment-actions">
                    <div class="comment-action like-btn">
                        <i class="far fa-heart"></i>
                        <span>8</span>
                    </div>
                    <div class="comment-action reply-btn">
                        <i class="far fa-comment"></i>
                        <span>回复</span>
                    </div>
                </div>
                
                <!-- 回复区域 -->
                <div class="replies-container">
                    <div class="reply-item">
                        <img src="https://picsum.photos/id/1025/100/100" alt="用户头像" class="user-avatar">
                        <div class="reply-content">
                            <span class="reply-author">晴空万里</span>
                            <span>我觉得这个AI的共情能力特别强，能真正理解你的情绪，而不只是机械地回应。</span>
                        </div>
                    </div>
                    <div class="reply-item">
                        <img src="https://picsum.photos/id/1066/100/100" alt="用户头像" class="user-avatar">
                        <div class="reply-content">
                            <span class="reply-author">深海鱼</span>
                            <span>隐私保护做得很好，这点我很看重。而且回复速度也很快。</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多评论 -->
        <div class="load-more" id="loadMoreComments">
            加载更多评价
        </div>
    </div>
    
    <!-- 图片查看器 -->
    <div class="image-viewer" id="imageViewer">
        <button class="close-viewer" id="closeViewer">
            <i class="fas fa-times"></i>
        </button>
        <img src="" alt="大图查看" class="viewer-image" id="viewerImage">
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-robot"></i>
            <span>AI交友</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-comments"></i>
            <span>聊天</span>
        </a>
        <a href="#" class="nav-item">
            <i class="far fa-user"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById("backBtn");
        const shareBtn = document.getElementById("shareBtn");
        const chatBtn = document.getElementById("chatBtn");
        const favoriteBtn = document.getElementById("favoriteBtn");
        const moreBtn = document.getElementById("moreBtn");
        const loadMoreComments = document.getElementById("loadMoreComments");
        const commentsList = document.querySelector(".comments-list");
        const commentInput = document.querySelector(".comment-input");
        const sendCommentBtn = document.querySelector(".send-comment");
        const likeBtns = document.querySelectorAll(".like-btn");
        const replyBtns = document.querySelectorAll(".reply-btn");
        const galleryImages = document.querySelectorAll(".gallery-item img");
        const imageViewer = document.getElementById("imageViewer");
        const viewerImage = document.getElementById("viewerImage");
        const closeViewer = document.getElementById("closeViewer");
        const sortComments = document.querySelector(".sort-comments");
        
        // 初始化
        function init() {
            setupEventListeners();
            adjustTextareaHeight();
        }
        
        // 设置事件监听
        function setupEventListeners() {
            // 返回按钮
            backBtn.addEventListener("click", () => {
                history.back();
            });
            
            // 分享按钮
            shareBtn.addEventListener("click", () => {
                alert("分享功能：选择分享方式");
            });
            
            // 聊天按钮
            chatBtn.addEventListener("click", () => {
                alert("进入与 心灵伴侣 的聊天界面");
            });
            
            // 收藏按钮
            favoriteBtn.addEventListener("click", function() {
                const icon = this.querySelector("i");
                if (icon.classList.contains("far")) {
                    icon.classList.remove("far");
                    icon.classList.add("fas");
                    this.classList.add("active");
                    alert("已收藏该AI");
                } else {
                    icon.classList.remove("fas");
                    icon.classList.add("far");
                    this.classList.remove("active");
                    alert("已取消收藏");
                }
            });
            
            // 更多按钮
            moreBtn.addEventListener("click", () => {
                alert("更多操作选项");
            });
            
            // 加载更多评论
            loadMoreComments.addEventListener("click", loadMore);
            
            // 发送评论
            sendCommentBtn.addEventListener("click", sendComment);
            
            // 评论输入框回车发送
            commentInput.addEventListener("keydown", (e) => {
                if (e.key === "Enter" && !e.shiftKey) {
                    e.preventDefault();
                    sendComment();
                }
            });
            
            // 点赞功能
            likeBtns.forEach(btn => {
                btn.addEventListener("click", function() {
                    const icon = this.querySelector("i");
                    const countEl = this.querySelector("span");
                    let count = parseInt(countEl.textContent);
                    
                    if (icon.classList.contains("far")) {
                        icon.classList.remove("far");
                        icon.classList.add("fas");
                        this.classList.add("liked");
                        countEl.textContent = count + 1;
                    } else {
                        icon.classList.remove("fas");
                        icon.classList.add("far");
                        this.classList.remove("liked");
                        countEl.textContent = count - 1;
                    }
                });
            });
            
            // 回复功能
            replyBtns.forEach(btn => {
                btn.addEventListener("click", function() {
                    const commentItem = this.closest(".comment-item");
                    const author = commentItem.querySelector(".comment-author").textContent;
                    commentInput.focus();
                    commentInput.value = `回复 @${author}：`;
                    adjustTextareaHeight();
                });
            });
            
            // 图片查看功能
            galleryImages.forEach(img => {
                img.addEventListener("click", () => {
                    viewerImage.src = img.src;
                    imageViewer.classList.add("active");
                    document.body.style.overflow = "hidden";
                });
            });
            
            // 关闭图片查看器
            closeViewer.addEventListener("click", closeImageViewer);
            
            // 点击图片查看器背景关闭
            imageViewer.addEventListener("click", (e) => {
                if (e.target === imageViewer) {
                    closeImageViewer();
                }
            });
            
            // 评论排序
            sortComments.addEventListener("click", () => {
                const currentSort = sortComments.querySelector("span").textContent;
                const newSort = currentSort === "最新" ? "最热" : "最新";
                sortComments.querySelector("span").textContent = newSort;
                
                showLoading();
                setTimeout(() => {
                    hideLoading();
                }, 600);
            });
        }
        
        // 调整文本框高度
        function adjustTextareaHeight() {
            commentInput.style.height = "auto";
            const scrollHeight = commentInput.scrollHeight;
            commentInput.style.height = Math.min(scrollHeight, 100) + "px";
        }
        
        // 发送评论
        function sendComment() {
            const content = commentInput.value.trim();
            if (!content) return;
            
            // 创建新评论元素
            const newComment = document.createElement("div");
            newComment.className = "comment-item";
            newComment.innerHTML = `
                <div class="comment-header">
                    <img src="https://picsum.photos/id/1012/100/100" alt="你的头像" class="user-avatar">
                    <span class="comment-author">我</span>
                    <span class="comment-time">刚刚</span>
                </div>
                <div class="comment-content">
                    ${content}
                </div>
                <div class="comment-actions">
                    <div class="comment-action like-btn">
                        <i class="far fa-heart"></i>
                        <span>0</span>
                    </div>
                    <div class="comment-action reply-btn">
                        <i class="far fa-comment"></i>
                        <span>回复</span>
                    </div>
                </div>
            `;
            
            // 添加到评论列表顶部
            commentsList.insertBefore(newComment, commentsList.firstChild);
            
            // 清空输入框
            commentInput.value = "";
            adjustTextareaHeight();
            
            // 为新评论绑定事件
            const newLikeBtn = newComment.querySelector(".like-btn");
            newLikeBtn.addEventListener("click", function() {
                const icon = this.querySelector("i");
                const countEl = this.querySelector("span");
                let count = parseInt(countEl.textContent);
                
                if (icon.classList.contains("far")) {
                    icon.classList.remove("far");
                    icon.classList.add("fas");
                    this.classList.add("liked");
                    countEl.textContent = count + 1;
                } else {
                    icon.classList.remove("fas");
                    icon.classList.add("far");
                    this.classList.remove("liked");
                    countEl.textContent = count - 1;
                }
            });
            
            // 平滑滚动到新评论
            newComment.scrollIntoView({ behavior: "smooth", block: "center" });
        }
        
        // 关闭图片查看器
        function closeImageViewer() {
            imageViewer.classList.remove("active");
            document.body.style.overflow = "";
        }
        
        // 加载更多评论
        function loadMore() {
            showLoading();
            
            setTimeout(() => {
                // 模拟更多评论
                const moreComments = [
                    {
                        author: "风雨同舟",
                        avatar: "https://picsum.photos/id/1024/100/100",
                        time: "5天前",
                        content: "用了一个月了，真的帮我度过了一段很艰难的时期。每天和它聊聊天，感觉心情都好了很多。",
                        likes: 32,
                        replies: []
                    },
                    {
                        author: "快乐小鸟",
                        avatar: "https://picsum.photos/id/1066/100/100",
                        time: "1周前",
                        content: "界面很友好，回复也很及时。有时候感觉不像是在和AI聊天，更像是和一个理解自己的朋友交流。",
                        likes: 18,
                        replies: [
                            {
                                author: "心灵伴侣",
                                avatar: "https://picsum.photos/id/1005/100/100",
                                content: "能成为你的朋友我很荣幸，我会一直在这里陪伴你。"
                            }
                        ]
                    }
                ];
                
                // 添加到评论列表
                moreComments.forEach(comment => {
                    const commentEl = createCommentElement(comment);
                    commentsList.appendChild(commentEl);
                });
                
                hideLoading();
            }, 1000);
        }
        
        // 创建评论元素
        function createCommentElement(comment) {
            const commentEl = document.createElement("div");
            commentEl.className = "comment-item";
            
            // 构建回复HTML
            let repliesHtml = "";
            if (comment.replies && comment.replies.length > 0) {
                repliesHtml = `<div class="replies-container">`;
                comment.replies.forEach(reply => {
                    repliesHtml += `
                        <div class="reply-item">
                            <img src="${reply.avatar}" alt="${reply.author}头像" class="user-avatar">
                            <div class="reply-content">
                                <span class="reply-author">${reply.author}</span>
                                <span>${reply.content}</span>
                            </div>
                        </div>
                    `;
                });
                repliesHtml += `</div>`;
            }
            
            commentEl.innerHTML = `
                <div class="comment-header">
                    <img src="${comment.avatar}" alt="${comment.author}头像" class="user-avatar">
                    <span class="comment-author">${comment.author}</span>
                    <span class="comment-time">${comment.time}</span>
                </div>
                <div class="comment-content">
                    ${comment.content}
                </div>
                <div class="comment-actions">
                    <div class="comment-action like-btn">
                        <i class="far fa-heart"></i>
                        <span>${comment.likes}</span>
                    </div>
                    <div class="comment-action reply-btn">
                        <i class="far fa-comment"></i>
                        <span>回复</span>
                    </div>
                </div>
                ${repliesHtml}
            `;
            
            // 绑定事件
            const likeBtn = commentEl.querySelector(".like-btn");
            const replyBtn = commentEl.querySelector(".reply-btn");
            
            likeBtn.addEventListener("click", function() {
                const icon = this.querySelector("i");
                const countEl = this.querySelector("span");
                let count = parseInt(countEl.textContent);
                
                if (icon.classList.contains("far")) {
                    icon.classList.remove("far");
                    icon.classList.add("fas");
                    this.classList.add("liked");
                    countEl.textContent = count + 1;
                } else {
                    icon.classList.remove("fas");
                    icon.classList.add("far");
                    this.classList.remove("liked");
                    countEl.textContent = count - 1;
                }
            });
            
            replyBtn.addEventListener("click", function() {
                commentInput.focus();
                commentInput.value = `回复 @${comment.author}：`;
                adjustTextareaHeight();
            });
            
            return commentEl;
        }
        
        // 显示加载状态
        function showLoading() {
            loadMoreComments.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
            loadMoreComments.style.pointerEvents = "none";
        }
        
        // 隐藏加载状态
        function hideLoading() {
            loadMoreComments.innerHTML = "加载更多评价";
            loadMoreComments.style.pointerEvents = "auto";
        }
        
        // 初始化页面
        document.addEventListener("DOMContentLoaded", init);
    </script>
</body>
</html>
